import { defineComponent } from 'vue'
import { ElDialog, ElButton, ElLink, ElTag } from 'element-plus'
import type { FormValuesType } from './typings'
import type { TableColumnProps } from '~/components/ProSaasTable/typings'
import ProSaasTable from '~/components/ProSaasTable'

export default defineComponent({
  name: 'DeviceListView',
  props: ['status', 'show', 'cancel'],
  emits: ['runStatusValue'],
  setup(props, { emit }) {
    const columns: TableColumnProps<FormValuesType>[] = [
      {
        label: '设备名称',
        prop: 'name',
        minWidth: 160,
        showOverflowTooltip: true,
        sortable: true
      },
      {
        label: '设备编号',
        prop: 'code',
        minWidth: 160,
        showOverflowTooltip: true,
        sortable: true
      },
      {
        label: '设备型号',
        prop: 'modelName',
        minWidth: 160,
        showOverflowTooltip: true,
        sortable: true
      },
      {
        label: '设备地址',
        prop: 'address',
        minWidth: 160,
        showOverflowTooltip: true,
        sortable: true
      },
      {
        label: '在线状态',
        prop: 'onlineState',
        minWidth: 180,
        sortable: true,
        showOverflowTooltip: true,
        render: (_, value) => {
          return (
            <>
              {value === 0 && <ElTag type="info">未激活</ElTag>}
              {value === 1 && <ElTag type="success">在线</ElTag>}
              {value === 2 && <ElTag type="danger">离线</ElTag>}
            </>
          )
        }
      },
      {
        label: '故障状态',
        prop: 'runStatus',
        minWidth: 180,
        sortable: true,
        showOverflowTooltip: true,
        render: ({ row }, value) => {
          return (
            <>
              {value === 0 && <ElTag type="info">未配置</ElTag>}
              {value === 1 && <ElTag type="success">正常</ElTag>}
              {value === 2 && (
                <ElLink type="primary" onClick={() => onRunStatus(row)}>
                  故障
                </ElLink>
              )}
            </>
          )
        }
      }
    ]

    //  故障列表
    const onRunStatus = (row: FormValuesType) => {
      emit('runStatusValue', row.id)
    }

    return () => (
      <ElDialog
        title="设备列表"
        modelValue={props.show}
        closeOnClickModal={false} // 点遮罩层不关弹窗
        draggable // 可拖拽
        beforeClose={props.cancel}
        width={1000}
        v-slots={{
          footer: () => (
            <>
              <ElButton onClick={props.cancel}>取消</ElButton>
            </>
          )
        }}
      >
        <ProSaasTable<FormValuesType>
          tableId="manhole_runmap_device"
          dispatchType="manholes/ManholeMapGetDeviceListGet"
          columns={columns}
          searchParams={{
            type: props.status
          }}
        />
      </ElDialog>
    )
  }
})
